<!--@ 首页 -->
<template>
	<view class="bg-white" v-if="dataFrom && dataFrom.workDetails">
		<u-notify ref="uNotify" />

		<view class="cu-bar bg-white  margin-top-xs" v-if="dataFrom.workDetails && dataFrom.workDetails.length">
			<view class="action">
				<text class="cuIcon-title text-cyan"></text>
				<text class="text-df text-cyan text-bold">服务项目

				</text>
			</view>
			<view class="action">
				<view class="cu-btn sm bg-cyan" v-if="dataFrom.order&&dataFrom.order.state ==1" @click="handeNew()">添加
				</view>
			</view>
		</view>
		<view class="padding-lr-sm ">
			<view class="margin-xs margin-tb-sm"
				style="position: relative;overflow: hidden;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)"
				v-for="(item,index) in dataFrom.workDetails" :key="index"
				v-if="dataFrom.workDetails && dataFrom.workDetails.length >0">

				<view class="padding-sm text-cyan solids-bottom flex justify-between align-center" :key="time">
					<view style=" font-family: KaiTi, KaiTi_GB2312, SimKai;" class="flex align-center">
						<text
							class="cu-tag bg-gray round margin-right-xs">{{`${dataFrom.workDetails.length-index}`}}</text>{{item.username?item.username:'-'}}
					</view>
					<view style="font-family: KaiTi, KaiTi_GB2312, SimKai;" class="flex align-center">
						<view>
							<view class="text-lg text-blod text-cyan">
								{{`${item.speedOfProgress?`${item.speedOfProgress}%`:'-'}`}}
							</view>
						</view>
						<view class="flex flex-direction align-center ">
							
							<view :class="item.state =='-1'?'bg-red':item.state =='1'?'bg-orange':'bg-green'"
								class="cu-tag sm margin-left-sm" style=" font-family: KaiTi, KaiTi_GB2312, SimKai;">
								{{item.state =='-1'?'取消':item.state =='1'?'完成':'进行中'}}
								<text class="padding-left-xs">({{`${item.belongingTo?`${item.belongingTo}`:'-'}`}})</text>
							</view>
						</view>
						
					</view>
				</view>
				<view style="position:relative;" class="padding-tb-xs padding-bottom-sm padding-lr-sm">
					<view class="flex align-center  justify-betweens " @click="handeimageShow(item)">
						<view class="text-sm margin-left-xs flex flex-wrap" style="width: 75%;">
							<text class="text-sm text-gray margin-left-sm"
								style=" font-family: KaiTi, KaiTi_GB2312, SimKai;">
								{{`${item.projectTitle?item.projectTitle:'-'}`}}
							</text>
						</view>
					<!-- 	<view class="flex flex-direction justify-end" style="width: 25%;">

							<view class="flex justify-end margin-top-sm">
								<view style="font-family: KaiTi, KaiTi_GB2312, SimKai;" class="text-gray">
									{{`${item.belongingTo?`${item.belongingTo}`:'-'}`}}
								</view>
							</view>
						</view> -->
					</view>
					<view class="flex align-center  margin-top-xs" v-if="dataFrom.order&&dataFrom.order.state ==1">
						<view class="cu-btn sm round margin-righ bg-green" @click="handeCompleted(item)"
							v-if="ShowAdmin && item.state ==0">完结</view>
						<view class="cu-btn sm margin-right round bg-yellow" v-if="item.selfOk !=1"
							@click="handeRemack(item)">更新
						</view>
						<view class="cu-btn sm margin-righ round bg-cyan" v-if="item.selfOk !=1"
							@click="handeComplete(item)">
							自我确认</view>
						<view class="text-blue" v-if="item.selfOk ==1">
							{{item.selfOkDate}}
						</view>
					</view>
				</view>
				<view class="solid-top padding-lr padding-tb-sm flex justify-between text-sm"
					style="width: 100%; font-family: KaiTi, KaiTi_GB2312, SimKai;">
					<view class="text-gray">
						开始日期：{{item.orderStartDate?item.orderStartDate:'-'}}
					</view>
					<view class="text-gray">
						预计结束日期：{{item.orderEndDate?item.orderEndDate:'-'}}
					</view>
				</view>
				<view v-if="item.imageShow" class="solid-top  padding-tb-xs flex justify-between text-sm"
					style="width: 100%; font-family: KaiTi, KaiTi_GB2312, SimKai;">
					<view class="cu-avatar-group" v-if="item.picPath">
						<view class="cu-avatar sm round" style="margin-left: 0px !important;" @click="handeImage(index2,item.picPath)"
							v-for="(item2,index2) in handItyCard(item.picPath)" :key="index2"
							:style="[{ backgroundImage:'url(' + item2 + ')' }]"></view>
					</view>

				</view>
			</view>
		</view>
		<remarkMode ref="remarkFrom" @ok="loadData" />
		<NewMode ref="Newref" @ok="loadData" />
	</view>
</template>
<script>
	import loadFlex from '@/components/loadFlex/loadFlex.vue' //加载框
	import remarkMode from '@/components/remarkMode.vue' //备注
	import NewMode from '@/components/NewMode.vue' //新增
	import myApi from '@/utils/app.js' //调用接口使
	export default {
		name: 'manufacture',
		components: {
			loadFlex,
			remarkMode,
			NewMode,
		},
		props: {
			ShowAdmin: {
				type: Boolean,
				default: false
			},
			dataFrom: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				loading: false,
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				model: {},
				time:''
			}
		},
		computed: {
			handItyCard() {
				return function(text) {
					if (text) return text.split(",")
					return []
				}
			},
		},
		methods: {
			async loadData(index) {
				this.$emit('ok', 1)
			},
			handeRemack(item) {
				this.$refs.remarkFrom.OnPortuni(item)
			},
			handeComplete(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认自我确定吗？',
					success: function(res) {
						if (res.confirm) that.handeNoApply(item)
					},
				})
			},
			onNotify(round) {
				this.$refs.uNotify.show({
					type: round.type ? round.type : 'success',
					message: round.message ? round.message : '删除成功',
					top: 50
				})
			},
			async handeNoApply(item) {
				this.loading == true
				try {
					const res = await this.$request({
						url: myApi.selfOk,
						method: 'post',
						data: {
							orderNo: item.orderId,
							vto: {
								id: item.id
							}
						},
					});
					console.log(res)
					if (res.code == 200) {
						this.$emit('ok', 1)
						setTimeout(() => (
							this.onNotify({
								message: '操作成功'
							})), 1000);
					}
				} catch (e) {
					// 失败执行

				} finally {
					// 销毁执行
					this.loading = false
				}
			},
			handeimageShow(item){
				item.imageShow = !item.imageShow
				this.time = new Date().valueOf() 
			},
			handeImage(index, item) {
				console.log(item)
				const imgs = item.split(",").map(item => {
					//只返回图片路径
					return item
				})
				console.log(imgs);
				//调用预览图片的方法
				uni.previewImage({
					urls: imgs,
					current: index
				})

			},
			handeNew() {
				this.$refs.Newref.onNew(this.dataFrom.workDetails[0])
			},
			handeCompleted(item) { // 完结
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要完结吗？',
					success: function(res) {
						if (res.confirm) that.onCompleted(item)
					},
				})
			},
			async onCompleted(item) {
				console.log(item)
				this.loading = true
				try {
					const res = await this.$request({
						url: myApi.bmsProjectGressOrderOver,
						method: 'post',
						data: {
							orderNo: item.orderId,
							vto: {
								id: item.id
							}
						},
					});
					console.log(res)
					if (res.code == 200) {
						this.$emit('ok', 1)
						setTimeout(() => (
							this.onNotify({
								message: '操作成功'
							})), 1000);
					}
				} catch (e) {
					// 失败执行

				} finally {
					// 销毁执行
					this.loading = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #CBEDED;

	}

	.onLine {
		// background-color: #4dc01d;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		left: -22px;
		top: 6px;
		height: 35rpx;
		line-height: 17px;
		width: 61px;
		-webkit-transform: rotate(310deg);
		-moz-transform: rotate(310deg);
		-ms-transform: rotate(310deg);
		-o-transform: rotate(310deg);
		transform: rotate(310deg);
	}

	.onLine a {
		color: #ffffff;
		display: block;
		font-size: 16rpx;
		// padding: 20px 50px 8px 50px;
		text-align: center;
		text-decoration: none;
	}
</style>